<template>
  <div class="big-box">
    <div class="box">
      <!-- logo文字 -->
      <div class="text">
        <b>妙手医生 妙手互联网医院</b>
      </div>
      <!-- 页面顶部搜索页 -->
      <div class="container">
        <div class="input" >
          <van-field style="
              border-radius: 10px;
              box-shadow: 0px 1px 0px 1px #e0e0e0;
              font-size: 0.3rem;
              " @click="toSearch" v-model="value1" left-icon="search" placeholder="搜索医生、医院、药品、疾病症状" />
        </div>
      </div>
      <!-- 滚动通告 -->
      <div class="scrollable">
        <van-notice-bar left-icon="volume-o" style="font-size: 0.25rem" background="#fef5ef"
          text="公告:1、自治区卫生热线0951-12320 银川市政府热线0951-12345 妙手互联网医院400-078-1000。2、为了更好的服务您,即日起您点击医生的“复诊开方”按钮产生的问诊费用由平台承担 " />
      </div>
      <!-- 预约挂号 极速问诊 复诊开方 -->
      <div class="grid">
        <van-grid :column-num="3">
          <van-grid-item to="/xiao/yuyue">
            <van-icon name="../预约挂号.png" size="1rem" />
            <div class="grid-text" style="font-size: 0.3rem">
              <b>预约挂号</b>
            </div>
            <div class="grid-text" style="font-size: 0.23rem; color: #aaaaaa">
              30W+专家入驻
            </div>
          </van-grid-item>
          <van-grid-item to="/xiao/wenzhen">
            <van-icon name="../极速问诊.png" badge="快" size="1rem" />
            <div class="grid-text" style="font-size: 0.3rem">
              <b>极速问诊</b>
            </div>
            <div class="grid-text" style="font-size: 0.23rem; color: #aaaaaa">
              平均3分钟接诊
            </div>
          </van-grid-item>
          <van-grid-item to="/kf">
            <van-icon name="../复诊开方.png" size="1rem" />
            <div class="grid-text" style="font-size: 0.3rem">
              <b>复诊开方</b>
            </div>
            <div class="grid-text" style="font-size: 0.23rem; color: #aaaaaa">
              慢病续方送到家
            </div>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 我要问专家 -->
      <div class="expert">
        <div class="expert-one">
          <li class="expert-left">我要问专家</li>
          <li class="expert-right">更多></li>
        </div>
        <div class="expert-two">
          <van-tabs>
            <van-tab v-for="(item, index) in list" :key="index" :title="item.adminchildrenname">
              <DoctorCard></DoctorCard>
            </van-tab>
          </van-tabs>
        </div>
        <div class="moreDoctors">查看此科室更多医生</div>
      </div>
      <!-- 为你推荐 -->
      <div class="recommendedForYou">
        <div class="recommendedForYou-title">
          <h1><b>为你推荐</b></h1>
        </div>
        <van-list>
          <div @scroll="onScroll" style="height: 15rem;overflow: auto;">

            <div v-for="(item, index) in listone" :key="index">
              <!-- 根据item的类型判断渲染不同组件 -->
              <div v-if="item.texttype === '语音'">
                <Commentstwo :list="item" />
                <!-- 当我item标签为“语音”时，渲染Commentstwo组件 -->
              </div>
              <div v-else-if="item.texttype === '文章'">
                <Commentsthree :list="item" />
                <!-- 当我item标签为“文章”时，渲染Commentsthree组件 -->
              </div>
              <div v-else>
                <!-- 可添加默认组件或错误提示等 -->
                <Comments></Comments>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <!-- <div class="footer">
        <van-tabbar v-model="active" fixed active-color="#1e6fff" inactive-color="#8e919f">
          <van-tabbar-item icon="wap-home" style="font-size: 0.2rem;">就医</van-tabbar-item>
          <van-tabbar-item icon="bell" style="font-size: 0.2rem;">消息</van-tabbar-item>
          <van-tabbar-item icon="contact" style="font-size: 0.2rem;">订单</van-tabbar-item>
        </van-tabbar>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 引入自定义封装组件的医生卡片
import DoctorCard from '@/components/DoctorCard/index.vue';
import Comments from '@/components/comments/index.vue';
import Commentstwo from '@/components/comments/indextwo.vue';
import Commentsthree from '@/components/comments/indexthree.vue';
import { departmentInformation, essay } from '@/api/index';//引入接口
import { reactive } from 'vue';
import { useRouter } from "vue-router";
const router = useRouter();
const listone = ref<essayData[]>([])//文章数据
const value1 = ref('');//输入框
const active = ref(0);//底部导航栏
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const num = ref(0)
// 滚动事件处理函数
const onScroll = async (e: any) => {
  // 获取当前元素的滚动高度
  const scrollHeight = e.target.scrollHeight;
  // 获取当前元素的可视高度
  const clientHeight = e.target.clientHeight;
  // 获取当前元素的滚动位置
  const scrollTop = e.target.scrollTop;
  // 判断是否满足上拉加载更多的条件，比如滚动到接近底部（距离底部一定阈值）
  if (scrollTop + clientHeight >= scrollHeight - 100 && !loading.value) {
    loading.value = true;
    console.log('触发了上拉加载')
    // 这里模拟异步获取新数据
    await new Promise((resolve) => setTimeout(resolve, 2000));
    // 获取到新数据后更新列表数据数组
    num.value += 10
    if (listone.value.length >= 100) {
      finished.value = true;
    }
    loading.value = false;
    getessay()

  }
}

// 科室数据类型
interface essayData {
  id: string
  texttitle: string
  textdescword: string
  texttype: string
  textcount: number
}
// 定义一个响应式变量list，初始值为空数组

// 定义一个异步函数getessay
const getessay = async () => {
  // 调用essay函数，并等待其返回结果
  await essay().then(res => {
    // 将返回结果中的data.data数组的前10个元素赋值给list.value
    listone.value = listone.value.concat(res.data.slice(num, 10))
  })
}
// 调用getessay函数

getessay()
interface ItemType {
  type: string
  data: any
}
const itemsArray: ItemType[] = reactive([
  { type: '语音', data: '<Commentstwo/>' },
])

// 定义一个接口Department，包含adminchildrenname和adminchildrenid两个属性，类型分别为string和string
interface Department {
  adminchildrenname: string
  adminchildrenid: string
}
// 使用ref函数创建一个响应式数组list，类型为Department[]
const list = ref<Department[]>([])

const department = async () => {
  //调用接口
  await departmentInformation().then(res => {
    // console.log(res)
    list.value = res.data.data.slice(0, 8)
    // console.log(list.value)
  })
}
department()
//点击跳转搜索页面
const toSearch = () => {
  console.log('dian')
  // router.push('/Home/homesearch')
  router.push('/search')
}

</script>

<style scoped>
* {
  font-size: 0.35rem;
  list-style: none;
}

.big-box {
  width: 100%;
  height: auto;
  background: #f3f3f3;
  overflow: auto;
}

.box {
  width: 95%;
  background: rgb(255, 255, 255);
  margin-left: 0.2rem;
  z-index: 10;
}

.container {
  width: 100vw;
  height: 0.9rem;
  background: #1e6fff;
  border-radius: 0px 0px 50% 50%;
  margin-top: 0.7rem;
  margin-left: -0.2rem;
}

.text {
  width: 100%;
  height: 0.7rem;
  line-height: 0.7rem;
  padding: 0 0 0 0.3rem;
  color: aliceblue;
  background: #1e6fff;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  /* 设置元素距离顶部的位置 */
  z-index: 10;
}

.input {
  width: 90%;
  height: 0.5rem;
  position: absolute;
  left: 0.35rem;
  top: 0.8rem;
}

.scrollable {
  margin-top: 0.1rem;
}

.grid {
  height: 2.5rem;
  background: #f9f9f9;
}

.expert-one {
  height: 0.7rem;
  line-height: 0.7rem;
}

.expert-left {
  float: left;
  width: 2rem;
  font-size: 0.34rem;
  margin-left: 0.3rem;
  font-weight: 900;
}

.expert-right {
  float: right;
  width: 1rem;
  font-size: 0.25rem;
  margin-right: 0.3rem;
  color: #595959;
}

.expert-two {
  float: left;
}

.moreDoctors {
  float: left;
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0rem 0.2rem 0.2rem;
  background: #ffffff;
  font-size: 0.3rem;
  color: #1e6fff;
}

.recommendedForYou {
  border-radius: 0.2rem;
  width: 100%;
  margin-top: 0.5rem;
  float: left;
  background: #fff;
}

.recommendedForYou-title {
  height: 1rem;
  width: 100%;
  /* background: red; */
  line-height: 1.5rem;
  font-weight: 900;
  padding: 0 0 0 0.3rem;
}
</style>
